← Back

LIBRARIES AND CDN IN JAVASCRIPT

This note explains libraries and CDN in simple language.

You will learn:

  1. what a library is
  2. why libraries are useful
  3. what a CDN is
  4. why CDN is useful
  5. how to connect a library
  6. how to use Lodash
  7. how to read library documentation
  8. how to understand setup, usage, and options in documentation

1. What is a library?

A library is a set of pre-written code that is ready to use in a project.

Instead of writing everything from zero, a developer can take a library and use its ready-made functions, methods, or classes. This saves time and makes development easier.

Diagram 1. Main idea of a library

Problem to solve
|
v
write everything yourself
or
use ready-made code from a library

Explanation

A library is useful because it already contains code for common tasks.

2. Main characteristics of libraries

A good library usually has these qualities:

Diagram 2. Why developers use libraries

Library
|
|-- ready-made code
|-- faster work
|-- reusable
`-- often supported by community

Explanation

This is why libraries are so common in modern development.

3. Examples of JavaScript libraries

Two examples from the lesson are:

Diagram 3. Example libraries

Chart.js
|
v
charts and graphs

Lodash
|
v
utility functions for data

Easy definition to remember

Library = ready-made code that you connect and use in your project

4. What is a CDN?

CDN means Content Delivery Network.

It is a distributed network of servers located in different parts of the world. These servers store copies of content such as:

When a user opens a website, the browser can load files from the server that is physically closer to that user. This reduces loading delay.

Diagram 4. CDN idea

Website file
|
v
copied to many servers around the world
|
v
user gets file from nearest server
|
v
faster loading

Explanation

The main goal of a CDN is speed and better availability.

5. Advantages of using a CDN

The main advantages are:

The lesson especially highlights two very important benefits:

  1. better loading speed for the user
  2. reduced load on the original server

Diagram 5. Why CDN is useful

CDN
|
|-- faster for user
|-- lighter load on main server
|-- better availability
`-- better traffic distribution

6. Connecting a library

To use a library, you must connect it to the project.

One common way is to connect it through a CDN. The lesson uses Lodash as the example and shows that you can find it on jsDelivr, copy the script tag, and insert it into your HTML.

Diagram 6. Connecting a library through CDN

Find library on jsDelivr
|
v
copy script tag
|
v
paste script tag into HTML
|
v
library becomes available in project

7. HTML example of connecting Lodash

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- head tags -->
  </head>
  <body>
    <!-- HTML-markup -->

    <!-- Lodash library script file -->
    <script async src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
    <!-- Your script file -->
    <script defer src="path/to/script.js"></script>
  </body>
</html>

The important rule is:

Diagram 7. Script order

1. library script
2. your script

Why?
|
v
your script may need the library

Explanation

If your script runs before the library is loaded, your code may not work.

8. How a connected library becomes available

When a library is connected through a CDN, it usually adds something to the global window object.

For Lodash, the available global symbol is:

_

So you can test it like this:

console.log(_);

This prints the Lodash library object.

Diagram 8. Lodash global object

CDN script loads
|
v
window gets _
|
v
JavaScript can use _.methodName(...)

9. Example: Lodash sum

The lesson gives this example:

console.log(_.sum([4, 2, 8, 6])); // 20
console.log(_.sum([5, 10])); // 15

Explanation

_.sum() adds all numbers in the array.

Diagram 9. _.sum()

_.sum([4, 2, 8, 6])
|
v
4 + 2 + 8 + 6
|
v
20

10. Example: Lodash shuffle

Another example from the lesson:

console.log(_.shuffle([1, 2, 3, 4])); // [4, 1, 3, 2]
console.log(_.shuffle([1, 2, 3, 4])); // [3, 2, 1, 4]

Explanation

_.shuffle() creates a new array with the same values, but in random order. The result can be different every time.

Diagram 10. _.shuffle()

[1, 2, 3, 4]
| shuffle
v
[4, 1, 3, 2]

Next time
[1, 2, 3, 4]
| shuffle
v
[3, 2, 1, 4]

11. Important rule about libraries

Different libraries can be connected and used in different ways.

That is why official documentation is very important. Modern libraries usually provide documentation with setup instructions, usage examples, and explanations of options.

12. How to read library documentation

The lesson explains this idea through the basicLightbox library, which can be used for modal windows, for example when opening a larger image after clicking a smaller one.

When reading documentation, always look for these three things:

  1. installation / setup
  2. usage examples
  3. options / additional settings

Diagram 11. How to read docs

Documentation
|
|-- Setup / Installation
|-- Usage / API / Examples
`-- Options / Configuration

Explanation

If you understand these three sections, most library docs become much easier.

13. Setup section

In many libraries, setup instructions are inside sections called:

These sections explain how to add the library to the project.

For basicLightbox, the lesson says this section is called Setup.

Diagram 12. Setup section purpose

Setup section
|
v
how to install
how to connect
how to start using library

14. Usage section

After setup, the next important part is usage.

This is often in sections called:

This part explains how the library actually works in code.

15. basicLightbox.create()

The lesson explains that basicLightbox.create() creates a new lightbox instance.

It takes two parameters:

  1. modal content - required
  2. settings object - optional

Example

const instance = basicLightbox.create(`
  <h1>Not closable</h1>
  <p>It's not possible to close this lightbox with a click.</p>
`, {
  closable: false
});

Explanation

Diagram 13. create() result

basicLightbox.create(content, options)
|
v
returns instance
|
v
instance controls the modal

16. Instance API

After create() returns an instance, that instance has its own methods.

The lesson specifically mentions:

Diagram 14. Lightbox instance

instance
|
|-- show()
`-- close()

Explanation

This is a good example of how documentation often has a second level:

17. Options section

A very important documentation section is the options section.

It may be called:

This section explains what extra settings you can pass into the library.

18. Example options in basicLightbox

The lesson gives these examples:

These options help you customize the library without changing its core code.

Diagram 15. Options purpose

Options object
|
v
change library behavior
|
v
customize result

19. Practical approach to documentation

The lesson gives a very good practical rule:

Do not only read the examples. Try to repeat them and adapt them for your own task. Combine different functions and settings until you get exactly the behavior you need.

Diagram 16. Best way to learn a library

Read docs
|
v
look at examples
|
v
repeat code
|
v
change code for your own task

Explanation

This is one of the best ways to learn any library.

20. Easy memory rules

Library = ready-made code
CDN = fast delivery of files from nearby servers
Setup = how to connect library
Usage = how to use it
Options = how to customize it
Instance = object returned by library method

21. Quick summary

22. Final conclusion

If you understand these ideas:

library
CDN
connection
global object
documentation
setup
usage
options
instance

then you already have a strong foundation for working with JavaScript libraries.

This is very important in real development, because developers often do not build everything from zero. They connect tools, read documentation, and adapt ready-made solutions to the project.

← Back